---
import Layout from "@src/layouts/Layout.astro";
import navigation from "@src/navigation.json";
import {buildGetPages} from "@src/navigation-utils";
const getPages = buildGetPages(await Astro.glob("./**/*.mdx"));
---

<Layout bodyClass="docs-index" title="Documentation">
  <h1>Rome Documentation</h1>

  {navigation.order.map(id => {
    return <Fragment>
      <h2>{navigation.titles[id]}</h2>

      <div class="docs-index-section">
        {getPages(id).map((page) => {
          return <a class="docs-index-button" href={page.url}>
            <span class="heading">{page.frontmatter.title}</span>
            <span class="emoji" aria-hidden="true">{page.frontmatter.emoji}</span>
            <span class="description">{page.frontmatter.description}</span>
          </a>
        })}
      </div>
    </Fragment>;
  })}
</Layout>
